<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.js"></script>
    <title>注册</title>
</head>
<body>
    <div id="app" style="margin: auto;width: 1000px;height: 610px;border: 1px solid rgb(123, 213, 255);">
        <h2 style="text-align: center;">填写个人信息</h2>
        <div style="width: 500px;float: left;">
            <div style="margin-left: 30px;">
                <form>
                    姓名: <input type="text" name="user" maxlength="10" v-model="user"><br><br>
                    <fieldset style="margin-right: 30px;">
                        <legend>健康信息</legend>
                    身高：<input type="text" v-model="height"><br>
                    体重：<input type="text" v-model="weight">
                    </fieldset><br>
                    性别:
                    <input type="radio" value="男" v-model="sex"> 
                    <label>男</label> 
                    <input type="radio" value="女" v-model="sex">
                    <label>女</label><br><br>
                    喜爱的运动:<br><br> 
                    <input type="checkbox" value="篮球" v-model="checkedNames"> 
                    <label>篮球</label>
                    <input type="checkbox" value="足球" v-model="checkedNames">
                    <label>足球</label>
                    <input type="checkbox" value="羽毛球" v-model="checkedNames"> 
                    <label>羽毛球</label> 
                    <input type="checkbox" value="跑步" v-model="checkedNames"> 
                    <label>跑步</label><br><br> 
                    <label>地址:</label> 
                    <select name="" id="" v-model="address">
                    <option v-for="(item,index) in citys" v-bind:value="item">
                        {{item}}
                    </option>
                    </select>
                    <br><br>
                    个人简介: <br> 
                    <textarea v-model="profile" cols="50" rows="6">
                    </textarea><br><br>
                    <div style="text-align: center">
                        <input type="submit" value="提交">
                        <input type="reset" value="重置">
                    </div>
                </form>
            </div>
    </div>
    <div style="width: 500px; float: right">
        <div style="margin-left: 30px">
            姓名:{{user}}<br><br><br>
            身高:{{height}}<br>
            体重:{{weight}}<br><br>
            性别:{{sex}}<br><br>
            喜爱的运动:{{checkedNames}}<br><br><br><br>
            地址:{{address}}<br>
            个人简介:{{profile}}
        </div>
    </div>
</div>
<script src="vue.js"></script>
<script type="text/javascript">  
	var vm= new Vue({
		el:'#app',
		data: {
			user: '',
			height: '',
			weight: '',
			sex: '',
			checkedNames: '',
			address: '',
			profile: '',
            citys:["北京","上海","广州","深圳"]
		}
	})
</script>
</body>
</html>